<template>
  <template v-if="loadingIsShow"> </template>
  <template v-else>
    <!-- 歌手 -->
    <div class="singer-sizer-list">
      <div v-for="(it, i) in sizerList" :key="i" class="singer-sizer-container">
        <span class="singer-sizer" :style="i == '筛选' ? 'width:39px' : ''"
          >{{ i }}：</span
        >
        <div class="singer-sizer-options">
          <template v-for="(item, index) in it" :key="index">
            <span
              :class="getIndexClass(item, i)"
              @click="setIndexClass(item, i)"
              >{{ item }}</span
            >
          </template>
        </div>
      </div>
    </div>
    <!-- 歌手列表 -->
    <div
      class="singer-list-container"
      ref="singContent"
      v-infinite-scroll="load"
    >
      <div
        class="singer-list-box"
        v-for="(item, index) in singerListData"
        :key="index"
      >
        <img :src="item.img1v1Url" />
        <div class="singer-name">
          <span>{{ item.name }}</span>
          <i
            v-if="item.accountId != null"
            class="iconfont icon-icon-user icon-user"
            @click="skipUserSingList(item.accountId)"
          ></i>
        </div>
      </div>
    </div>
  </template>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import axios from "axios";
import songListCoverVue from "../../../../components/songListCover/songListCover.vue";

const route = useRoute();
const router = useRouter();
const store = useStore();

// loading
const loadingIsShow = ref(true);

// 选中筛选条件
const sizerActive = reactive({
  language: "全部",
  classify: "全部",
  sizer: "热门",
});

// 根据下标判定筛选条件
const getIndexClass = (item, i) => {
  if (i == "语种") {
    return item == sizerActive.language ? "singer-active" : "";
  }
  if (i == "分类") {
    return item == sizerActive.classify ? "singer-active" : "";
  }
  if (i == "筛选") {
    return item == sizerActive.sizer ? "singer-active" : "";
  }
};

// 标签点击(更改字段)
const setIndexClass = (item, i) => {
  // 清空数据
  singerListData.value = [];
  // 更改请求维度
  isHot = false;
  if (i == "语种") {
    sizerActive.language = item;
  }
  if (i == "分类") {
    sizerActive.classify = item;
  }
  if (i == "筛选") {
    sizerActive.sizer = item;
  }
  getIndexClass(item, i);
  // 重置分页
  base = 1;
  getSizerListData();
};

// 请求字符
let area = ref(-1);
let type = ref(-1);
let initial = ref(-1);
// 筛选请求数据

// 筛选请求
const getSizerListData = async () => {
  /**
   * area 语种 
   *           -1:全部
                7:华语
                96:欧美
                8:日本
                16:韩国
                0:其他
   * type 分类
              -1:全部
                1:男歌手
                2:女歌手
                3:乐队
   * initial 筛选
                热门 -1,
                # 0
   */
  area.value = sizerChar[sizerActive.language];
  type.value = sizerChar[sizerActive.classify];
  initial.value = sizerChar[sizerActive.sizer];

  await axios
    .get(
      `/artist/list?area=${area.value}&type=${type.value}&initial=${
        initial.value
      }&offset=${(base - 1) * 30}&limit=${limit}`
    )
    .then((res) => {
      res.data.artists.forEach((ele) => {
        singerListData.value.push(ele);
      });
      base++;
    })
    .catch((err) => {
      console.error(err);
    });
};

// 转义字符
const sizerChar = {
  全部: -1,
  华语: 7,
  欧美: 96,
  日本: 8,
  韩国: 16,
  其他: 0,
  男歌手: 1,
  女歌手: 2,
  乐队组合: 3,
  热门: -1,
  A: "a",
  B: "b",
  C: "c",
  D: "d",
  E: "e",
  F: "f",
  G: "g",
  H: "h",
  I: "i",
  J: "j",
  K: "k",
  L: "l",
  M: "m",
  N: "n",
  O: "o",
  P: "p",
  Q: "q",
  R: "r",
  S: "s",
  T: "t",
  U: "u",
  V: "v",
  W: "w",
  X: "x",
  Y: "y",
  Z: "z",
  "#": 0,
};

// 筛选条件
const sizerList = {
  语种: ["全部", "华语", "欧美", "日本", "韩国", "其他"],
  分类: ["全部", "男歌手", "女歌手", "乐队组合"],
  筛选: [
    "热门",
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "#",
  ],
};

// 点击用户图标跳转到用户创建歌单
const skipUserSingList = (id) => {};

// 热门歌手数据
const singerListData = ref([]);
// 请求次数
let base = 1;
// 请求量
const limit = 30;

// 请求热门歌手数据
const getSingerListData = async () => {
  await axios
    .get(`/top/artists?offset=${(base - 1) * limit}&limit=${limit}`)
    .then((res) => {
      res.data.artists.forEach((ele) => {
        singerListData.value.push(ele);
      });
      base++;
      loadingIsShow.value = false;
    })
    .catch((err) => {
      console.error(err);
      loadingIsShow.value = false;
    });
};

// 内容区元素
const singContent = ref(null);

// 控制请求维度
let isHot = true;

onMounted(() => {
  getSingerListData();
});

// 触底加载
const load = () => {
  if (isHot == true) {
    getSingerListData();
  }
  getSizerListData();
};
</script>
<style lang="less">
@import url(../../../../assets/fonts/singer-name/iconfont.css);

//   选中样式
.singer-active {
  background-color: #fdf5f5 !important;
  color: #ec4141 !important;
  border-radius: 20px;
}

.singer-sizer-list {
  display: flex;
  width: 1100px;
  flex-direction: column;

  .singer-sizer-container {
    display: flex;
    align-items: baseline;
    margin-bottom: 6px;

    .singer-sizer-options {
      display: flex;
      flex-wrap: wrap;

      span {
        margin: 0 8px;
        padding: 4px 8px;

        &:hover {
          cursor: pointer;
          color: black;
        }
      }
    }
  }
}

.singer-list-container {
  width: 1100px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .singer-list-box {
    display: flex;
    flex-direction: column;

    .singer-name {
      display: flex;
      justify-content: space-between;
      margin-bottom: 14px;

      span {
        max-width: 160px;
        /* 文字省略 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }

      .icon-user {
        background-color: #ee4341;
        border-radius: 30px;
        width: 24px;
        text-align: center;
        transform: scale(0.7);
        color: aliceblue;

        &:hover {
          cursor: pointer;
        }
      }
    }
    &:hover {
      cursor: pointer;
    }

    img {
      margin-bottom: 10px;
      width: 165px;
      height: 165px;
      border-radius: 4px;
    }
  }
}
</style>